<template>
<!-- 保单录入模块-客户税收居民身份声明文件 -->
    <div class="fillcontain">
        <div class="tit">
            <i class="el-icon-document"></i>
            <span class="ml5">客户税收居民身份声明文件</span>
        </div>

        <div class="searchPage">
            
            <div class="node-done">
                <el-row class="spe-com mb10">
                    <el-col :span="2" class="com-lab">
                        姓名(投保人)
                    </el-col>
                    <el-col :span="4">
                        <el-input :disabled="allInfoReadOnly" v-model="tax.calname" maxlength="50"></el-input>
                    </el-col>
                </el-row>
                <el-row class="spe-com mb10">
                    <el-col :span="2" class="com-lab">
                        本人声明
                    </el-col>
                    <el-col :span="16" class="com-line">
                        <el-radio-group v-model="tax.pflag">
                            <!-- <el-radio :label="3">备选项</el-radio>
                            <el-radio :label="6">备选项</el-radio>
                            <el-radio :label="9">备选项</el-radio> -->
                            <el-radio :disabled="allInfoReadOnly" label="1">1、仅为中国税收居民</el-radio>
                            <el-radio :disabled="allInfoReadOnly" label="2">2、仅为非居民</el-radio>
                            <el-radio :disabled="allInfoReadOnly" label="3">3、既是中国税收居民又是其他国家(地区)税收居民</el-radio>
                        </el-radio-group>
                        <!-- <el-checkbox-group v-model="checkList">
                            <el-checkbox label="仅为中国税收居民"></el-checkbox>
                            <el-checkbox label="仅为非居民"></el-checkbox>
                            <el-checkbox label="既是中国税收居民又是其他国家(地区)税收居民"></el-checkbox>
                        </el-checkbox-group> -->
                    </el-col>
                </el-row>
                <el-row class="spe-com mb10">
                    <el-col :span="2" class="com-lab">
                        &nbsp;&nbsp;
                    </el-col>
                    <el-col :span="10">
                        <span class="warn">如以上选项中勾选2项或第3项，请填写下列信息：</span>
                    </el-col>
                </el-row>
                <el-row class="spe-com mb10">
                    <el-col :span="3" class="com-lab">
                        姓(英文或拼音)
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="姓(英文或拼音)"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.susrname" maxlength="32"></el-input>
                    </el-col>
                    <el-col :span="3" class="com-lab">
                        名(英文或拼音)
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="名(英文或拼音)"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.susrgname" maxlength="32"></el-input>
                    </el-col>
                    <el-col :span="3" class="com-lab">
                        出生日期
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="出生日期"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.smoddate" maxlength="16"></el-input>
                    </el-col>
                </el-row>


                <div class="node-done-title">
                    <span class="line">|</span>
                    <span class="txt">现居住地(境外地址无需填写中文地址栏)：</span>
                </div>
                <el-row class="node-com">
                    <el-col :span="2" class="com-lab">
                        <label>中文栏: 国家</label>
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="国家"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.nationdc" maxlength="128"></el-input>
                    </el-col>
                    <el-col :span="2" class="com-lab">
                        <label >省</label>
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="省"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.sprovname" maxlength="32"></el-input>
                    </el-col>
                    <el-col :span="2" class="com-lab">
                        <label >市</label>
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="市"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.scityname" maxlength="32"></el-input>
                    </el-col>
                    <el-col :span="2" class="com-lab">
                        <label >现居详细地址</label>
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="现居详细地址"></el-input> -->
                        <el-input v-model="tax.lngaddr01" maxlength="32"></el-input>
                    </el-col>
                </el-row>
                
                <el-row class="node-com">
                    <el-col :span="2" class="com-lab">
                        <label>英文栏: 国家</label>
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="国家"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.nationabdc" maxlength="256"></el-input>
                    </el-col>
                    <el-col :span="2" class="com-lab">
                        <label >省</label>
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="省"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.pprovname" maxlength="64"></el-input>
                    </el-col>
                    <el-col :span="2" class="com-lab">
                        <label >市</label>
                    </el-col>
                    <el-col :span="4">
                       <!--  <el-input  placeholder="市"></el-input> -->
                       <el-input :disabled="allInfoReadOnly" v-model="tax.pcityname" maxlength="64"></el-input>
                    </el-col>
                    <el-col :span="2" class="com-lab">
                        <label >现居详细地址</label>
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="现居详细地址"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.lngaddr02" maxlength="32"></el-input>
                    </el-col>
                </el-row>
            </div>

            <div class="node-done">
                <div class="node-done-title">
                    <span class="line">|</span>
                    <span class="txt">出生地(境外地址无需填写中文地址栏)：</span>
                </div>
                <el-row class="node-com">
                    <el-col :span="2" class="com-lab">
                        <label>中文栏: 国家</label>
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="国家"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.cntname" maxlength="25"></el-input>
                    </el-col>
                    <el-col :span="2" class="com-lab">
                        <label >省</label>
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="省"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.provname" maxlength="50"></el-input>
                    </el-col>
                    <el-col :span="2" class="com-lab">
                        <label >市</label>
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="市"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.city" maxlength="50"></el-input>
                    </el-col>
                    <el-col :span="2" class="com-lab">
                        <label >出生详细地址</label>
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="现居详细地址"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.lngaddr03" maxlength="32"></el-input>
                    </el-col>
                </el-row>
                
                <el-row class="node-com">
                    <el-col :span="2" class="com-lab">
                        <label>英文栏: 国家</label>
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="国家"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.crname" maxlength="50"></el-input>
                    </el-col>
                    <el-col :span="2" class="com-lab">
                        <label >省</label>
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="省"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.prodesc" maxlength="50"></el-input>
                    </el-col>
                    <el-col :span="2" class="com-lab">
                        <label >市</label>
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="市"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.citydesc" maxlength="100"></el-input>
                    </el-col>
                    <el-col :span="2" class="com-lab">
                        <label >出生详细地址</label>
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="现居详细地址"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.lngaddr04" maxlength="32"></el-input>
                    </el-col>
                </el-row>
            </div>

            <div class="node-done">
                <div class="node-done-title">
                    <span class="line">|</span>
                    <span class="txt">税收居民国(地区)及纳税人居民号：</span>
                </div>
                <el-row class="node-com">
                    <el-col :span="3" class="com-lab">
                        <label>税收居民国(地区)1</label>
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="国家"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.sdesc01" maxlength="128"></el-input>
                    </el-col>
                    <el-col :span="3" class="com-lab">
                        <label>纳税人识别号1</label>
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="国家"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.pedesc01" maxlength="128"></el-input>
                    </el-col>
                </el-row>
                <el-row class="node-com">
                    <el-col :span="3" class="com-lab">
                        <label>税收居民国(地区)2</label>
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="国家"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.sdesc02" maxlength="128"></el-input>
                    </el-col>
                    <el-col :span="3" class="com-lab">
                        <label>纳税人识别号2</label>
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="国家"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.pedesc02" maxlength="128"></el-input>
                    </el-col>
                </el-row>
                <el-row class="node-com">
                    <el-col :span="3" class="com-lab">
                        <label>税收居民国(地区)3</label>
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="国家"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.sdesc03" maxlength="128"></el-input>
                    </el-col>
                    <el-col :span="3" class="com-lab">
                        <label>纳税人识别号3</label>
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-input  placeholder="国家"></el-input> -->
                        <el-input :disabled="allInfoReadOnly" v-model="tax.pedesc03" maxlength="128"></el-input>
                    </el-col>
                </el-row>

                <el-row class="spe-com mb10">
                    <el-col :span="1" class="com-lab">
                        &nbsp;&nbsp;
                    </el-col>
                    <el-col :span="10">
                        <span>如不能提供居民国(地区)信息，纳税人识别号，请选择原因：</span>
                    </el-col>
                </el-row>

                <el-row class="spe-com mb10">
                    <el-col :span="1" class="com-lab">
                        &nbsp;&nbsp;
                    </el-col>
                    <el-col :span="16" class="com-line">
                        <!-- <el-checkbox-group v-model="checkList">
                            <el-checkbox label="居民国(地区)不发纳税人识别号"></el-checkbox>
                            <el-checkbox label="账户持有人未能取得纳税人识别号，如此选项，请解释具体原因:"></el-checkbox>
                        </el-checkbox-group> -->
                        <el-radio-group v-model="tax.reasons">
                            <el-radio :disabled="allInfoReadOnly" label="1">居民国(地区)不发纳税人识别号</el-radio>
                            <el-radio :disabled="allInfoReadOnly" label="2">账户持有人未能取得纳税人识别号，如此选项，请解释具体原因</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="1" class="com-lab">
                        &nbsp;&nbsp;
                    </el-col>
                    <el-col :span="23">
                        <!-- <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        >
                        </el-input> -->
                        <el-input :disabled="allInfoReadOnly"
                                    type="textarea"
                                    maxlength="128"
                                    show-word-limit
                                    placeholder="请输入内容"
                                    v-model="tax.pareason">
                            </el-input>
                    </el-col>
                </el-row>
                <div class="foot-btn">
                    <button class="save" @click="saveInfo">保存</button>
                    <button class="back" @click="goPage">返回</button>
                </div>

            </div>

        </div>
    </div>
</template>

<script>
    import constant from '@/utils/constant';
    import * as api from "@/api/policyRecord/nodeMod/iDStatement.js";
    export default {
        data(){
            return {
                checkList: [],
                tax: {},
                allInfoReadOnly: false,
                appfrom: '',
                clntnum: '',
                applnum: '',
                oprationType: '',
                dtecrt: ''
            }
        },
        created(){
           
        },
        mounted(){
            
        },
        methods: {
            goPage(){
                this.$router.push({path:'/home/policyRecord/record/CRS'})
            },
            initData() {
                let that = this;
                let applnum = this.$route.query.applnum;
                let para = {
                    applnum: applnum,
                    oprationType: 'true',
                    appfrom: 'FM'
                }
                this.$store.dispatch('loading/CHANGE_LOADING',true)
                api.queryIndividualTax(para).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false)
                    console.log(res.data)
                    if(res.resultCode == constant.SUCCESS && res.data){
                        that.tax = res.data.IndividualTaxPO;
                        that.appfrom = res.data.appfrom;
                        that.clntnum = res.data.clntnum;
                        that.applnum = res.data.applnum;
                        that.oprationType = res.data.oprationType;
                        that.dtecrt = res.data.IndividualTaxPO.dtecrt;
                    }
                }).catch(err =>{
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                })
            },

            popMsg(msg,type){
                this.$message({
                message: msg,
                type: type
                });
            },

            saveInfo(){
                if(this.tax.reasons == "2" && this.tax.pareason==""){
                    this.popMsg("账户持有人未能取得纳税人识别号，请填写具体原因","error");
                    return;
                }
				let count = this.count(this.tax.nationdc,this.tax.sprovname,this.tax.scityname,this.tax.lngaddr01);
				if ( count >0 && count < 4 ) {
					this.popMsg("(中文)现居住地的国家、省、市和详细地址全都不能为空,除非单条记录全部为空","error");				
					return;
				} 
				count = this.count(this.tax.nationabdc,this.tax.pprovname,this.tax.pcityname,this.tax.lngaddr02)
				if(count >0 && count < 4 ){
					this.popMsg("(英文或拼音)现居住地的国家、省、市和详细地址全都不能为空,除非单条记录全部为空","error");
					return;
				}
				count = this.count(this.tax.cntname,this.tax.provname,this.tax.city,this.tax.lngaddr03)
                if(count >0 && count< 4 ){
                    this.popMsg("(中文)出生地的国家、省、市和详细地址全都不能为空,除非单条记录全部为空","error");
                    return;
                }
				count = this.count(this.tax.crname,this.tax.prodesc,this.tax.citydesc,this.tax.lngaddr04)
				if(count >0 && count < 4 ){
					this.popMsg("(英文或拼音)出生地的国家、省、市和详细地址全都不能为空,除非单条记录全部为空","error");
					return;
				}
				

                let params = {
                    "tax":JSON.stringify(this.tax),
                    "appfrom": this.appfrom,
                    "clntnum": this.clntnum,
                    "applnum": this.applnum,
                    "oprationType": this.oprationType,
                    "dtecrt": this.dtecrt
                }
                api.updateIndividualTax(params).then(res=>{
                    if (res.resultCode == constant.SUCCESS) {
                        this.popMsg("保存成功","success")
                    }else{
                        this.popMsg(res.resultMsg,"error")
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
			count(v1,v2,v3,v4){
				let tmp = {
					"k1":v1,
					"k2":v2,
					"k3":v3,
					"k4":v4
				}
				let count = 0;
				Object.values(tmp).forEach( v =>{
					if ("" != v && undefined != v ) {
						count ++;
					} 
				})
				return count;
			}
        },
        activated(){
            this.initData();
        }
    }
</script>

<style lang="less" scoped>
    .searchPage{
        padding: 15px 15px 0 15px;
        background: #fff;
    }
    .node-done{
        .node-done-title{
            height:42px;
            line-height: 42px;
            padding: 0 10px;
            background: #f8f8f8;
            .line{
                color: #e43552;
                margin-right: 5px;
            }
        }
        .node-select{
            padding: 15px;
            .txt-right{
                text-align: right;
            }
        }
    }
    .com-lab{
        padding: 0 4px;
        text-align:right;
        line-height: 30px;
    }
    .node-com{
        padding: 8px 0;
    }
    .tit{
        height: 40px;
        line-height: 40px;
        padding: 0 15px;
        background: #fff;
        border-bottom: 1px solid #e1e1e1;
    }
    .com-line{
        line-height: 30px;
    }
    .warn{
        color:#F76565
    }
    .fillcontain{
        padding-bottom: 60px;
    }
    .foot-btn{
        text-align:center;
        margin-top:15px;
        .save{
            padding: 7px 15px;
            font-size: 12px;
            border-radius: 3px;
            background: #F76565;
            border: 1px solid #F76565;
            color: #fff;
            cursor: pointer;
        }
        .back{
            padding: 7px 15px;
            font-size: 12px;
            border-radius: 3px;
            background: #fff;
            border: 1px solid #e1e1e1;
            color: #666;
            cursor: pointer;
            margin-left: 15px;
        }
    }


</style>



